<template>
	<view class="uni-input" :class="[isFocus?'is-focus':'']">
		<view class="uni-input_form">
			<view class="uni-input_form_title" :class="[isFocus||value?'is-fixed':'']">{{title}}</view>
			<input :type="type" :focus="focus" @focus="toFocus" @blur="toBlur" @input="toInput" :confirm-type="confirmType" :value="value">
			<view class="slot">
				<slot name="right"></slot>
			</view>
			<view class="uni-input_form_close iconfont" v-if="clean && value && isFocus" @click="toClean">&#xe632;</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "UniNavBar",
		components: {
		},
		data () {
			return {
				isFocus: false
			}
		},
		props: {
			title: {
				type: String,
				default: ""
			},
			type: {
				type: String,
				default: "text"
			},
			focus: {
				type: [Boolean, String],
				default: false
			},
			value: {
				type: [String, Number],
				default: ""
			},
			confirmType: {
				type: String,
				default: ""
			},
			clean: {
				type: Boolean,
				detaule: false
			}
		},
        mounted() {
			this.isFocus = this.focus
        },
		methods: {
			toFocus() {
				this.isFocus = true
			},
			toBlur() {
				this.isFocus = false
			},
			toInput (e) {
				this.$emit('input', e.detail.value)
			},
			toClean () {
				this.$emit('input', "")
			}
		}
	};
</script>

<style lang="scss" scoped>
	.uni-input{
		width: 100%;
		position: relative;
		padding-top: 16px;
		margin-top: 10px;
		.after{
			position: absolute;
			right: 0;
			top: 1px;
			height: calc(100% - 2px);
			display: flex;
			align-items: center;
			background-color: $bg-page;
			padding: 0 10px;
			font-size: $font-size-base;
			color: $font-hb;
			border-left: 1px solid $border-bd;
		}
		&.is-focus{
			input{
				border-color: $primary !important;
			}
			.uni-input_form_title{
				color: $primary !important;
			}
		}
		.uni-input_form{
			height: 40px;
			line-height: 40px;
			position: relative;
			.uni-input_form_title{
				width: 100%;
				height: 16px;
				position: absolute;
				left: 0;
				top: 50%;
				font-size: 14px;
				transform: translate(0, -50%);
				color: $font-placeholder;
				line-height: 20px;
				transition: all .3s;
				-moz-transition: all .3s; /* Firefox 4 */
				-webkit-transition: all .3s; /* Safari 和 Chrome */
				-o-transition: all .3s; /* Opera */
				pointer-events: none;
				&.is-fixed{
					top: -10px !important;
					font-size: 12px !important;
				}
			}
			input{
				width: 100%;
				height: 100%;
				border-bottom: 1px solid $border-bc;
				transition: border-color .5s;
				-moz-transition: border-color .5s; /* Firefox 4 */
				-webkit-transition: border-color .5s; /* Safari 和 Chrome */
				-o-transition: border-color .5s; /* Opera */
			}
			.slot{
				position: absolute;
				right: 0;
				top: 0;
			}
			.uni-input_form_close{
				position: absolute;
				right: 0;
				top: 0;
				font-size: 18px;
				color: $font-hc;
				opacity: 0.5;
			}
		}
	}
</style>
